<template>
  <div>
    <div class="topDivSerch">
      <div class="m-type-area">
        <div class="am-input-group">
          <input v-model="searchData" type="search" class="am-form-field search" placeholder="搜索">
          <span class="am-input-group-btn">
            <button @click="handleSearchClick" class="title_serch  button buttonclick search_btn" type="button" id="search_btn">搜索</button>
          </span>
        </div>
      </div>
    </div>
    <div style="height:1.04rem"></div>
    <div class="product">
      <div class="productDiv">
        <div class="no-more" v-show="!pageInfo.totalPage">
          <img src="/static/img/search_none.png" alt="">
          <p>抱歉，没有找到你想要的商品，为您推荐以下商品:</p>
        </div>
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="isMoreLoading"
          infinite-scroll-distance="10"
          :infinite-scroll-immediate-check="true"
        >
          <li class="pinterestLi" v-for="item of list" :key="item.id">
            <router-link :to="'/detail/' + item.id">
              <div class="pinterest_img">
                <img class="pinterest_img_sty" :src="item.imgUrl" alt="item.title">
                <div class="comments-link">
                  <div class="listTitle">
                    <div class="pinterest_title" style="text-indent:0px!important;">{{item.title}}</div>
                  </div>
                  <div class="middleinDivTop">
                    <div class="productMoney">
                      ￥{{item.newsMoney}} + {{item.point}}积分
                    </div>
                  </div>
                  <div class="BottominDiv">
                    <span class="s_rightstr">已售{{item.saleNum}}</span>
                  </div>
                  <div style="clear:both"></div>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
        <div class="loading-box tc" v-if="isLoading">
          <mt-spinner :size="40" type="fading-circle" class="loading-more"></mt-spinner>
          <span class="loading-more-txt">加载中...</span>
        </div>
        <div class="no-more" v-if="noMore">没有更多了~</div>
        <div style="height: 1.3rem;clear: both;"></div>
      </div>
    </div>
    <public-top></public-top>
    <public-menu></public-menu>
  </div>
</template>

<script>
import axios from 'axios'
import PublicMenu from '../public/Menu'
import PublicTop from '../public/Top'

export default {
  name: 'listpoint',
  components: {
    PublicTop,
    PublicMenu
  },
  data () {
    return {
      searchName: '',
      sort: '',
      order: '',
      listSel: '',
      priceUp: '',
      priceDown: '',
      list: [],
      searchData: '',
      isLoading: false, // 加载中转菊花
      isMoreLoading: true, // 加载更多中
      noMore: false, // 是否还有更多
      pageInfo: { // 分页信息
        page: 1,
        pageSize: 6,
        total: 0, // 总条数
        totalPage: 1 // 总分页数
      }
    }
  },
  methods: {
    showSelect (res) {
      if (res.data === 'paixuA') {
        this.sort = 'id'
      }
      if (res.data === 'paixuB') {
        this.sort = 'sellhit'
      }
      if (res.data === 'paixuC') {
        this.sort = 'prices'
      }
      if (res.data === 'paixuD') {
        this.sort = 'create_date'
      }
      if (this.order === 'asc') {
        this.order = 'desc'
      } else {
        this.order = 'asc'
      }
      this.isMoreLoading = true
      this.pageInfo.page = 1 // 初始化
      this.pageInfo.totalPage = 1
      this.list = []
      this.noMore = false
      this.getAjaxInfo()
    },
    handleSearchClick () {
      this.$router.push({ path: '/listPoint', query: { searchname: this.searchData } })
      this.isMoreLoading = true
      this.pageInfo.page = 1 // 初始化
      this.pageInfo.totalPage = 1
      this.list = []
      this.noMore = false
      this.getAjaxInfo()
    },
    keywordVal () {
      this.searchData = this.$route.query.searchname
    },
    getAjaxInfo (type) {
      this.isLoading = true
      let urlData = '/meimai/interface/goods/getPointGoods'
      axios.get(urlData, {
        params: {
          title: this.$route.query.searchname,
          sort: this.sort,
          classId: this.listSel,
          minprice: this.priceUp,
          maxprice: this.priceDown,
          pageSize: this.pageInfo.pageSize,
          page: this.pageInfo.page
        }
      }).then((res) => {
        let datas = res.data
        console.log(datas)
        if (datas.code === 0) {
          if (type === 'loadMore') {
            this.list = this.list.concat(datas.data.proList)
          } else {
            this.list = datas.data.proList
          }
          this.pageInfo.total = datas.data.total
          this.pageInfo.totalPage = datas.data.totalPage
        }
        this.isLoading = false
        this.isMoreLoading = false
      })
    },
    loadMore () {
      this.pageInfo.page += 1 // 增加分页
      this.isMoreLoading = true // 设置加载更多中
      this.isLoading = true // 加载中
      if (this.pageInfo.page > this.pageInfo.totalPage) { // 超过了分页
        this.noMore = true // 显示没有更多了
        this.isLoading = false // 关闭加载中
        return false
      }
      // 做个缓冲
      setTimeout(() => {
        this.getAjaxInfo('loadMore')
      }, 100)
    },
    shaiData (data) {
      this.listSel = data.listSel
      this.priceDown = data.priceDown
      this.priceUp = data.priceUp
      this.getAjaxInfo()
    }
  },
  mounted () {
    this.getAjaxInfo()
    this.keywordVal()
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.topDivSerch
  position: fixed
  z-index: 100
  width: 100%
  padding: .14rem .2rem .14rem .2rem
  height: 1.04rem
  background-color: #f8f8f8
  box-sizing: border-box
  .m-type-area
    z-index: 100
    top: .98rem
    width: 100%
    padding: 0
    .am-input-group
      position: relative
      display: flex
      border-collapse: separate
      .search
        background: url(../../assets/img/icon_search.png) no-repeat .2rem
        background-color: white
        padding-left: .7rem
        font-size: 1em
        text-align: left
        border: .02rem solid #e1e1e1
        height: .76rem
        flex: 1
      .am-input-group-btn
        position: relative
        font-size: 0
        white-space: nowrap
        .title_serch
          margin-left: .12rem
          background-color: white
          font-size: .28rem
          border-color: #ddd !important
          height: .76rem
          color: #353535 !important
          padding: .1rem .3rem .1rem .3rem
          border: .02rem solid #ccc
.product
  background-color: #f8f8f8
  position: absolute
  left: 0
  right: 0
  top: 1rem
  bottom: 0.98rem
  .productDiv
    width: 100%
    .pinterestLi
      position: relative
      display: block
      left: 1px
      top: 10px
      width: calc(50% - 0.3rem)
      margin: 0.14rem
      padding: 0
      border:0.01rem solid #f3f3f3
      list-style: none
      float: left
      overflow: hidden
      background-color: #fff
      z-index: 1
      box-sizing: border-box
      text-align: center
      .pinterest_img
        display: inline-block
        width: calc(100% - 0.02rem)
        font-size: 0
        min-height: 40px
        img
          overflow: hidden
          width: calc(100% - 0.1rem)
          margin-top:0.01rem
        .pinterest_img_sty
          height: 175px
          width: 100%
          display: inline-block
      .comments-link
        padding: 0px 6px
        font-size: 12px
        font-size: 0.26rem
        .listTitle
          float: left
          width: 100%
          position: relative
          .pinterest_title
            text-decoration: none
            font-size: 14px
            color: #1c1f20
            display: inline-block
            width: 100%
            height: auto
            line-height: 22px
            vertical-align: middle
            ellipsis()
        .middleinDivTop
          float: left
          width: 100%
          margin-top: -5px
          .productMoney
            line-height: 25px
            color: #ed2935
            float: left
            margin-left: 0px
            margin-right: 5px
            vertical-align: middle
            height: 25px
            font-size: 16px
            overflow: hidden
            text-overflow: ellipsis
            .g_price
              text-decoration: line-through
              color: #a1a1a1
              font-size: 13px
              padding-left: 2px
              font-weight: 100
        .tag-div
          position: absolute
          line-height: 14px
          top: 0.01rem
          left: 0.01rem
          .am-btn-danger
            color: #fff
            background-color: #f93c42 !important
            border-color: #f93c42 !important
            padding: 1px 4px
            text-align: center
            display: inline-block
            line-height: 1.2
        .BottominDiv
          height: 16px
          line-height: 15px
          padding: 0
          margin: 0
          .s_rightstr
            float: right
            margin-right: 0px
            vertical-align: middle
            color: #676869
            text-align: right
            width: 58%
            font-size: 11px
            line-height: 17px
  .no-more,
  .loading-box
    text-align: center
    line-height: 1rem
    margin-top: .3rem
    color: #707070
    .loading-more
      display: flex
      justify-content: center
</style>
